<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.mask{
				display: none;
				width:100%;
				height: 100%;
				background: rgba(0,0,0,0.5);
				position: fixed;
				top: 0px;
				left: 0px;
				border-radius: 5px;
			}
			.btn{
				width:100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: #CCCC77;
				background-color: purple;
			}
			.login{
				width: 300px;
				height: 300px;
				background: #FE8F2F;
				position: fixed;
				top: 50px;
				left: 50px;
				border-radius: 5px;
				display: none;
			}
			.login .title{
				width: 100%;
				height: 50px;
				border-radius: 5px;
				background: #006400;
				line-height: 50px;
				text-indent: 10px;
				font-family: "microsoft yahei";
				font-size: 20px;
				color: #fff;
				font-weight: bold;
				cursor: pointer;
			}
			.login .title .close{
				width: 50px;
				height: 50px;
				font-size: 35px;
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="btn">登录</div>
		<div class="mask"></div>
		<div class="login">
			<div class="title">用户登录
				<span class="close">X</span>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js"></script>
		<script>
			var btn = $('.btn');
			var close =$('.close');
			var mask = $('.mask');
			var login = $('.login');
			var title = $('.title');
			var X=0, Y=0, T=0,L=0;
			
			btn.click(function(){
				center();
				mask.show();
				login.show();
			});
			close.click(function(){
				mask.css({'display':'none'});
				login.css({'display':'none'});
			});
				
		
			function center(){
				W = (window.innerWidth-300)/2;
				H = (window.innerHeight-300)/2;
				login.css({'left':W+'px'});
				login.css({'top':H+'px'});
			}
			window.onresize = function(){
				center();
			}
			//原理  现在的left、top值 - 开始left 、top值 = 移动中鼠标的Ｘ　Ｙ　　－　鼠标按下时的Ｘ　Ｙ
			//获取鼠标按下时的X Y
			
			title.mousedown(function(e){
				var isover=true;
				var e = e||window.event;
				 X = e.clientX;
				 Y = e.clientY;
				 T = login.offset().top;
				 L = login.offset().left;
				 console.log(X+','+Y+','+T+','+L);
		
				
			$(document).mousemove(function(e){
					if (isover) {
						var e = e||window.event;
					  	var	nowclientX = e.clientX;
					 	var	nowclientY = e.clientY;
						var _left = nowclientX-X+L;
						var _top = nowclientY-Y+T;
						if (_left<0){
							_left=0;
						} else if(_left>=$(document).width()-login.width()){
							_left=$(document).width()-login.width();
						}
						if (_top<0) {
							_top=0;
						} else if(_top>=$(document).height()-login.height()){
							_top=$(document).height()-login.height();
						}
						login.css({'left':_left+'px'});
						login.css({'top':_top+'px'});
					}
					});
			$(document).mouseup(function(){
				isover=false;
			});
				
			});
		</script>
	</body>
</html>
